<!--suppress ALL -->
<template>
  <el-table
    :data="tableData"
    @current-change="startReadNovel"
    highlight-current-row>
    <el-table-column
      prop="novelName"
      label="小说">
    </el-table-column>
    <el-table-column>
      <template slot-scope="scope">
        <el-button @click="deleteNovel(scope.row)" type="text" size="small"><i class="el-icon-delete"></i></el-button>
      </template>
    </el-table-column>
  </el-table>
</template>


<script type="text/javascript">
  import axios from 'axios'

  export default {
    data() {
      return {
        tableData: [{}]
      }
    },
    // 接受父组件的值
    props: ['tableData', 'context', 'novelTitle'],
    mounted: function () {
      this.getAllNovels();
    },
    methods: {
      getAllNovels() {
        var _this = this
        axios.get('http://localhost:8081/findAll')
          .then(function (response) {
            var data = response.data;
            _this.tableData = data;
            var contextData = data[0].chapters[0].chapterContext;
            var novelTitleData = data[0].novelName;
            _this.$emit("changeContext", contextData, novelTitleData, data, data);
          }).catch(function (response) {
          console.log(response);
        });
      },
      deleteNovel(row) {
        var data = this.tableData[row];
        axios.post('http://localhost:8081/delete', {novelName: data.novelName})
          .then(function (response) {
            var data = response.data;
            _this.tableData = data;
          }).catch(function (response) {
          console.log(response);
        });
      },
      startReadNovel(row) {
        var _this = this;
        var allNovel = this.tableData;
        //把单前阅读的书籍放在localStorage中
        window.localStorage.setItem("novelName", row.novelName);
        axios.get('http://localhost:8081/findByNovelName?novelName=' + row.novelName)
          .then(function (response) {
            var data = response.data;
            var contextData = data[0].chapters[0].chapterContext;
            var novelTitleData = data[0].novelName;
            _this.$emit("changeContext", contextData, novelTitleData, data, allNovel);
          }).catch(function (response) {
          console.log(response);
        });
      }
    }
  }
</script>

<style>
  .serach {
    margin-top: 40px;
    margin-bottom: 10px;
  }

  .active {
    background: olivedrab;
  }
</style>
